<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="font-size: 15px;">用户信息管理</b>
    <div style="float:right">
        <!--<el-button type="primary" @click="addUser()">新增用户信息</el-button>-->
    </div>
    <el-table :data="userList">
        <el-table-column prop="id" label="编号" width="100">
        </el-table-column>
        <el-table-column prop="userType" label="用户类型" width="120">
        </el-table-column>
        <el-table-column prop="account" label="账号" width="180">
        </el-table-column>
        <el-table-column prop="userName" label="用户名" width="200">
        </el-table-column>
        <el-table-column  label="创建时间" width="200">
            <template slot-scope="scope">
                {{ scope.row.createdTime | formatDate }}
            </template>
        </el-table-column>
        <el-table-column prop="createdUserId" label="创建人ID" width="200">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :page-sizes="[4, 5, 8]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                userList: [],
                pageSize:4,
                currentPage:1,
                total:0
            },
            mounted:function(){
                this.loadData()
            },
            methods: {
                loadData:function(){
                    axios.get("user/getAllUsers",{params:{
                            pageSize:this.pageSize,
                            page:this.currentPage
                        }}).then((res)=>{
                        console.log(res.data)
                        this.userList=res.data.data.list;
                        this.total=res.data.data.pageTotal;
                    })
                },
                //功能：改变查询每页显示的条数，pagination组件会自动传递选择的pageSize
                handleSizeChange() {
                    this.currentPage=1;
                    this.loadData()
                },
                //功能：翻页查询，pagination组件会自动传递当前页号currentPage
                handleCurrentChange() {
                    this.loadData()
                }/*,
                addUser(){
                    window.parent.document.getElementById("myframe").src="addUser.html";
                }*/
            },
        filters:{
                formatDate:function (value){
                    return new Date(value).toLocaleDateString();
                }
        }
        }
    );
</script>
</html>